<template>
	<view>
			<view class="u-page">
				<u-sticky>
					<view class="common-top-searchbar">
						<u-search v-model="searchKeyValue" :show-action="false" shape="square"></u-search>
					</view>
				</u-sticky>
				<view class="tree-list">
					 <u-collapse :value="expandValue">
						 <treeItem :list="treeData" :show-count="true" :do-filter="true" @onItemClick="handlerItemClick"></treeItem>
					 </u-collapse>
				</view>
			</view>
	</view>
</template>

<script>
	import treeItem from '@/components/treeItem/index.vue';
	import {mapState, mapMutations} from 'vuex';
	export default {
		components: {treeItem},
		data() {
			return {
				searchKeyValue: '',
				expandValue: ['*'],
				treeData: []
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		mounted() {
			var vm = this;
			uni.showLoading();
			/*
			vm.getAndLoad('通讯录列表', '/mobile/lc/tree/layuiUserData.jsp?userId=' + vm.userInfo.userId, function (source) {
				uni.hideLoading();
				var result = vm.$Util.arrayListToTree(source);
				result.forEach(vm.filterFoo);
				vm.treeData = result;
			});
			*/
			
			vm.getAndLoad('通讯录列表', '/mobile/wx/lc/tree/txlData.jsp?userId=' + vm.userInfo.userId, function (source) {
				source.forEach(vm.filterFoo);
				vm.treeData = source;
				vm.$nextTick(() => {
					uni.hideLoading();
				});
			});
			
		},
		watch: {
			searchKeyValue: function () {
				this.treeData.forEach(this.filterFoo);
			}
		},
		methods: {
			filterFoo: function (item) {
				var kv = this.searchKeyValue || '';
				!item.label && (item.label = item.name);
				if (item.children) {
					item.children.forEach(this.filterFoo);
					item.show = item.children.some(n => n.show);
				} else {
					item.show = !kv || item.label.includes(kv.trim());
				}
			},
			handlerItemClick: function (item) {
				uni.navigateTo({
					url: '/pages/contacts/personal?data=' + this.$Util.encodeJSON(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tree-list {
		background: #fff;
		margin-top: 20rpx;
	}
</style>
